<template>
    <section class="secretaryStatistics">
            <swiper class="swiper-no-swiping"  v-show="isshow" :style="dqwidth" :options="swiperOption" >
               <div class="swiper-pagination swiperHeaderBg" slot="pagination"></div>
                <swiper-slide>
                    <div class="slider-content"  >
                        <!-- <div class="title"><span>年龄结构分析</span></div> -->
                        <div class="statisticsNumber" >
                            <div style="flex:16">
                                <div style="display: flex">
                                    <el-card v-for="(item, index) in ageList" @click.native="clickAge(item, index)" shadow="never" :class="`statisticsNumberCard age-statisticsNumberCard ${activeItemIndex === index ? 'card-item-active' : ''}`" >
                                        <label class="el-upload-list__item-status-label self-define"><i class="el-icon-upload-success el-icon-check"></i></label>
                                        <p >
                                            <template>
                                                <CountTo :startVal="0" :endVal="item.val" :duration="1300" class="top_value"></CountTo>
                                                <span class="unit_label" v-if="item.name.indexOf('年龄')>-1">岁</span>
                                                <span class="unit_label" v-else>人</span>
                                            </template>
                                        </p>
                                        <p class="top_label">{{item.name}}</p>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;clear: both;height: 65%;margin-left: 40px">
                            <div id="age" style="flex: 9;height: 500px"></div>
                            <div class="listStyle" >
                                <SecretaryExport @handleChildClick="handleChildClick" :cadresType="cadresType" :apiRoot="apiRoot" :query="ageQuery" ></SecretaryExport>
                            </div>
                        </div>
                    </div>
                </swiper-slide>
                <swiper-slide >
                    <div class="slider-content">
                        <!-- <div class="title"><span>人员类型分析</span></div> -->
                        <div class="statisticsNumber">
                            <div style="flex:16">
                                <div style="display: flex">
                                    <el-card v-for="(item, index) in personTypeList" shadow="never" @click.native="personType(item, index)"  :class="`statisticsNumberCard ${activeItemIndex === index ? 'card-item-active' : ''}`">
                                        <label class="el-upload-list__item-status-label self-define"><i class="el-icon-upload-success el-icon-check"></i></label>
                                        <p>
                                            <template>
                                                <CountTo :startVal="0" :endVal="item.val" :duration="1300" class="top_value"></CountTo>
                                                <span class="unit_label">人</span>
                                            </template>
                                        </p>
                                        <p class="top_label">{{item.name}}</p>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;clear: both;height: 65%;margin-left: 40px">
                            <div id="personType" style="flex: 9;height: 500px"></div>
                            <div class="listStyle">
                                <SecretaryExport @handleChildClick="handleChildClick" :cadresType="cadresType" :apiRoot="apiRoot" :query="personTypeQuery" ></SecretaryExport>
                            </div>
                        </div>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="slider-content">
                        <!-- <div class="title"><span>任职年限分析</span></div> -->
                        <div class="statisticsNumber">
                            <div style="flex:16">
                                <div style="display: flex">
                                    <el-card v-for="(item, index) in workDurationList" shadow="never" @click.native="clickYear(item, index)"  :class="`statisticsNumberCard ${activeItemIndex === index ? 'card-item-active' : ''}`">
                                        <label class="el-upload-list__item-status-label self-define"><i class="el-icon-upload-success el-icon-check"></i></label>
                                        <p>
                                            <template>
                                                <CountTo :startVal="0" :endVal="item.val" :duration="1300" class="top_value"></CountTo>
                                                <span class="unit_label">人</span>
                                            </template>
                                        </p>
                                        <p class="top_label">{{item.name}}</p>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;clear: both;height: 65%">
                            <div id="workDuration" style="flex: 9;height: 100%"></div>
                            <div class="listStyle">
                                <SecretaryExport @handleChildClick="handleChildClick" :cadresType="cadresType" :apiRoot="apiRoot" :query="workDurationQuery" ></SecretaryExport>
                            </div>
                        </div>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="slider-content">
                        <!-- <div class="title"><span>报酬结构分析</span></div> -->
                        <div class="statisticsNumber">
                            <div style="flex:16">
                                <div style="display: flex">
                                    <el-card v-for="(item, index) in rewardList" shadow="never" @click.native="updateReward(index)"  :class="`statisticsNumberCard ${activeItemIndex === index ? 'card-item-active' : ''}`">
                                        <label class="el-upload-list__item-status-label self-define"><i class="el-icon-upload-success el-icon-check"></i></label>
                                        <p>
                                            <template>
                                                <CountTo :startVal="0" :endVal="item.val" :duration="1300" class="top_value"></CountTo>
                                            </template>
                                            <span class="unit_label">元</span>
                                        </p>
                                        <p class="top_label">{{item.name}}</p>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;clear: both;height: 65%">
                            <div id="reward" style="flex: 9;height: 100%;margin-top: 50px"></div>
                        </div>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="slider-content">
                        <!-- <div class="title" style="margin-top: 55px!important;"><span>党龄情况分析</span></div> -->
                        <div class="statisticsNumber">
                            <div style="flex:16">
                                <div style="display: flex">
                                    <el-card v-for="(item, index) in partyStandingList" @click.native="partgeType(item, index)" shadow="never" :class="`statisticsNumberCard ${activeItemIndex === index ? 'card-item-active' : ''}`">
                                        <label class="el-upload-list__item-status-label self-define"><i class="el-icon-upload-success el-icon-check"></i></label>
                                            <p>
                                                <template>
                                                    <CountTo :startVal="0" :endVal="item.val" :duration="1300" class="top_value"></CountTo>
                                                    <span class="unit_label">人</span>
                                                </template>
                                            </p>
                                            <p class="top_label">{{item.name}}</p>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;clear: both;height: 65%">
                            <div id="partyStanding" style="flex: 9;height: 100%"></div>
                            <div class="listStyle">
                                <SecretaryExport @handleChildClick="handleChildClick" :cadresType="cadresType" :apiRoot="apiRoot" :query="partyStandingQuery" ></SecretaryExport>
                            </div>
                        </div>
                    </div>
                </swiper-slide>
                <swiper-slide>
                <div class="slider-result-content" >
                    <!-- <div class="title" style="margin-top: 55px!important;"><span>自定义分析</span></div> -->
                    <div style="text-align: left;margin-left: 50px;">
                        <br>
                        <h4>查询条件列表</h4>
                        <br>
                        <el-button  @click="addToList()" type="primary">添加</el-button>
                        <el-table :data="queryFields">
                            <el-table-column label="查询表">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.queryTableType" clearable placeholder="请选择查询的表" @change="(val)=>{getQueryTable(val,scope.$index)}">
                                        <el-option v-for="item in tableType" :key="item.id" :value="item.name" :label="item.value"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="查询条件">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.filedName" clearable placeholder="请选择需要匹配的字段" @change="(val)=>{getType(val,scope.$index)}">
                                        <el-option v-for="item in fields" :key="item.id" :value="item.name" :label="item.des"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="匹配方式" prop="comparison">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.comparison" clearable placeholder="请选择匹配方式">
                                        <el-option v-for="item in searchTypeOption" :key="item.value" :value="item.value" :label="item.label"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="匹配值">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.comparison==='在范围内'" class="specialInput">
                                        <el-input v-model="scope.row.valueMin" style="float: left"></el-input>
                                        <div  style="float: left" > &nbsp;&nbsp;至&nbsp;&nbsp;</div>
                                        <el-input v-model="scope.row.valueMax" style="float: left"></el-input>
                                    </div>
                                    <div v-else>
                                        <el-input v-model="scope.row.valueMin"></el-input>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="年份">
                                <template slot-scope="scope" >
                                  <el-date-picker
                                    v-if="scope.row.queryTableType === '报酬信息表'"
                                    v-model="scope.row.searchYear"
                                    type="year"
                                    placeholder="选择年"
                                    value-format="yyyy">
                                  </el-date-picker>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="del(scope.$index)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <br>
                        <div>
                            <el-button type="primary" size="small" @click="loadQueryFields()">查询</el-button>
                            <el-button type="primary" size="small" @click="downLoad()">下载</el-button>
                        </div>
                        <br>
                        <div style="display: flex;clear: both;height: 65%">
                            <div id="query-result" style="flex: 9;height: 550px"></div>
                            <div class="listStyle" v-if="queryResult">
                                <SecretaryExport @handleChildClick="handleChildClick" :cadresType="cadresType" :apiRoot="queryApiRoot" type="result" :query="personQueryFields" ></SecretaryExport>
                            </div>
                        </div>
                    </div>
                </div>
            </swiper-slide>
            </swiper>
        <el-dialog
              append-to-body
              :visible.sync="showBaseInfoDiaVis"
              class="CsjDetail"
              width="90%">
              <div v-if="JSON.stringify(detailInfo) !== '{}'">
                <el-form label-position="right" label-width="80px" :model="detailInfo">
                        <el-row :gutter="10" style="margin-top: 20px">
                            <el-col :span="16">
                                <el-card shadow="hover" style="height: 320px;" class="baseMassage">
                                    <el-col :span="6">
                                        <div style="height: 320px"  >
                                            <el-image :src="detailInfo.headSculpture" style="width: 160px;height: 240px;border-radius: 4px"></el-image>
                                            <div class="name-post1" >
                                                <div>
                                                    {{detailInfo.districtName || "暂无" }} --
                                                    <span> {{detailInfo.name || "暂无"}} </span>
                                                </div>
                                                <div > {{detailInfo.quasiAssessmentRank || "职级评定中..."}} </div>
                                            </div>
                                        </div>
                                    </el-col>
                                  <el-col :span="18">
                                      <div class="cardTitleStyle">
                                          <el-image class="smallTitle" src="../../../static/img/csj/jbry.png"></el-image>
                                          <p>基本人员信息</p>
                                      </div>
                                      <el-col :span="12">
                                          <div class="baseInfoDiv">
                                              <span class="baseLabel">性别</span>
                                              <span class="baseVal">{{detailInfo.sex||"暂无"}}</span>
                                          </div>
                                          <div class="baseInfoDiv">
                                              <span class="baseLabel">出生日期</span>
                                              <span class="baseVal">{{detailInfo.birth||"暂无"}}</span>
                                          </div>
                                          <div class="baseInfoDiv">
                                              <span class="baseLabel">民族</span>
                                              <span class="baseVal">{{detailInfo.nation||"暂无"}}</span>
                                          </div>
                                          <div class="baseInfoDiv">
                                              <span class="baseLabel">籍贯</span>
                                              <span class="baseVal">{{detailInfo.nativePlace||"暂无"}}</span>
                                          </div>
                                          <div class="baseInfoDiv">
                                              <span class="baseLabel">健康情况</span>
                                              <span class="baseVal">{{detailInfo.health||"暂无"}}</span>
                                          </div>
                                      </el-col>
                                      <el-col :span="12">
                                          <div class="baseInfoDiv">
                                              <span class="baseLabel">身份证号</span>
                                              <span class="baseVal">{{detailInfo.identityCard||"暂无"}}
                                                <el-popover
                                                    v-show="detailInfo.identityCardAnnex"
                                                    placement="right"
                                                    width="330"
                                                    trigger="hover">
                                                    <div v-for=
                                                            "subItem in handleImage(detailInfo.identityCardAnnex)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text">
                                                        <div class="el-icon-picture fileIcon"></div>
                                                    </el-button>
                                                </el-popover>
                                            </span>
                                          </div>
                                          <div class="baseInfoDiv">
                                              <span class="baseLabel">联系电话</span>
                                              <span class="baseVal">{{detailInfo.contact||"暂无"}}</span>
                                          </div>
                                          <div class="baseInfoDiv">
                                              <span class="baseLabel">学历</span>
                                              <span class="baseVal">{{detailInfo.education||"暂无"}}
                                                <el-popover
                                                    v-show="detailInfo.educationAnnex"
                                                    placement="right"
                                                    width="330"
                                                    trigger="hover">
                                                    <div v-for="subItem in handleImage(detailInfo.educationAnnex)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text">
                                                        <div class="el-icon-picture fileIcon"></div>
                                                    </el-button>
                                                </el-popover>
                                            </span>
                                          </div>
                                          <div class="baseInfoDiv">
                                              <span class="baseLabel">入党时间</span>
                                              <span class="baseVal">{{detailInfo.partyTime||"暂无"}}
                                                <el-popover
                                                    v-show="detailInfo.partyTimeAnnex"
                                                    placement="right"
                                                    width="330"
                                                    trigger="hover">
                                                    <div v-for="subItem in handleImage(detailInfo.partyTimeAnnex)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text">
                                                        <div class="el-icon-picture fileIcon"></div>
                                                    </el-button>
                                                </el-popover>
                                            </span>
                                          </div>
                                          <div class="baseInfoDiv">
                                              <span class="baseLabel">出生地</span>
                                              <span class="baseVal">{{detailInfo.birthPlace||"暂无"}}</span>
                                          </div>
                                      </el-col>
                                  </el-col>
                                </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card shadow="hover" style="height: 320px" class="workMessage">
                                    <div class="cardTitleStyle">
                                        <el-image  class="smallTitle" src="../../../static/img/csj/gz.png"></el-image>
                                        <p>基本工作信息</p>
                                    </div>
                                    <el-col :span="12">
                                        <div class="baseInfoDiv">
                                            <span class="baseLabel">任职时长</span>
                                            <span class="baseVal">{{detailInfo.onDutyTime?detailInfo.onDutyTime+'年':"暂无"}}
                                                <span>{{detailInfo.onDutyMonth?detailInfo.onDutyMonth+'月':" "}}</span>
                                                <el-popover
                                                    v-show="detailInfo.workTimeAnnex"
                                                    placement="right"
                                                    width="330"
                                                    trigger="hover">
                                                    <div v-for="subItem in handleImage(detailInfo.workTimeAnnex)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text">
                                                        <div class="el-icon-picture fileIcon"></div>
                                                    </el-button>
                                                </el-popover>
                                            </span>
                                        </div>
                                        <div class="baseInfoDiv">
                                            <span class="baseLabel">现任职级</span>
                                            <span class="baseVal">{{detailInfo.quasiAssessmentRank||"暂无"}}</span>
                                        </div>
                                        <div class="baseInfoDiv">
                                            <span class="baseLabel">现任职级时间</span>
                                            <span class="baseVal">{{detailInfo.termOfOffice||"暂无"}}</span>
                                        </div>
                                    </el-col>
                                    <el-col  :span="12">
                                        <div class="baseInfoDiv">
                                            <span class="baseLabel">人员类型</span>
                                            <span class="baseVal">{{detailInfo.personnelType||"暂无"}}</span>
                                        </div>
                                        <div class="baseInfoDiv">
                                            <span class="baseLabel">专技职称</span>
                                            <span class="baseVal">{{detailInfo.professionalTitle||"暂无"}}
                                                <el-popover
                                                    v-show="detailInfo.professionalTitleAnnex"
                                                    placement="bottom"
                                                    width="330"
                                                    trigger="hover">
                                                    <div v-for="subItem in handleImage(detailInfo.professionalTitleAnnex)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text">
                                                        <div class="el-icon-picture fileIcon"></div>
                                                    </el-button>
                                                </el-popover>
                                            </span>
                                        </div>
                                        <div class="baseInfoDiv">
                                            <span class="baseLabel">到村时间</span>
                                            <span class="baseVal">{{detailInfo.workTime||"暂无"}}</span>
                                        </div>
                                    </el-col>
                                </el-card>
                            </el-col >
                        </el-row>
                </el-form>
                <el-row :gutter="10" style="margin-top: 40px">
                          <el-col :span="8">
                            <el-card shadow="hover"  class="repaid">
                              <div class="cardTitleStyle">
                                  <el-image  class="smallTitle" src="../../../static/img/csj/bc.png"></el-image>
                                  <p>社会保险信息</p>
                              </div>
                              <div class="insurance_box">
                                  <div class="baseInfoDiv insurance_line">
                                    <span class="baseLabel">医疗保险</span>
                                    <span class="baseVal">{{detailInfo.medicalInsurance||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <span class="baseLabel">参保时间</span>
                                    <span class="baseVal">{{detailInfo.insuredTime||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <span class="baseLabel">缴费年限(月)</span>
                                    <span class="baseVal">{{detailInfo.insurancePaymentPeriod ? detailInfo.insurancePaymentPeriod + '月' : "暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <el-tooltip class="item" effect="dark" content="当前一级账户余额" placement="top">
                                      <span class="baseLabel">当前一级账...</span>
                                    </el-tooltip>
                                    <span class="baseVal">{{detailInfo.primaryAccountBalance||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <el-tooltip class="item" effect="dark" content="当前二级账户余额" placement="top">
                                      <span class="baseLabel">当前二级账...</span>
                                    </el-tooltip>
                                    <span class="baseVal">{{detailInfo.secondaryAccountBalance||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <el-tooltip class="item" effect="dark" content="当前医保账户余额" placement="top">
                                      <span class="baseLabel">当前医保账...</span>
                                    </el-tooltip>
                                    <span class="baseVal">{{detailInfo.insuranceAccountBalance||"暂无"}}</span>
                                  </div>
                                </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <span class="baseLabel">养老保险</span>
                                    <span class="baseVal">{{detailInfo.socialSecurityDatabases||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <span class="baseLabel">缴费年限</span>
                                    <span class="baseVal">{{detailInfo.paymentPeriod||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <el-tooltip class="item" effect="dark" content="上年账户累计储存额" placement="top">
                                      <span class="baseLabel">上年账户累...</span>
                                    </el-tooltip>
                                    <span class="baseVal">{{detailInfo.depositBalance||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv insurance_line">
                                    <span class="baseLabel">在职/退休</span>
                                    <span class="baseVal">{{detailInfo.hasOnTheJob||"暂无"}}</span>
                                  </div>
                                  <div v-if="detailInfo.retirementWage" class="baseInfoDiv insurance_line">
                                    <span class="baseLabel">退休工资</span>
                                    <span class="baseVal">{{detailInfo.retirementWage}}</span>
                                  </div>
                            </el-card>
                          </el-col>
                          <el-col :span="8">
                              <el-card shadow="hover"  class="workExperience">
                                  <div class="cardTitleStyle">
                                      <el-image  class="smallTitle" src="../../../static/img/csj/jl.png"></el-image>
                                      <p>工作简历</p>
                                  </div>
                                  <el-col :span="24"  class="Secoll Secoll_workExperience"  style="padding:0px 20px!important;">
                                      <el-timeline  :reverse="true">
                                          <el-timeline-item
                                              v-for="(activity, index) in handleWorkExperience(detailInfo.workExperience)"
                                              :key="index" style="text-align: left">
                                              {{activity}}
                                          </el-timeline-item>
                                      </el-timeline>
                                  </el-col>
                                  <el-col :span="6" :offset="19" v-if="handleWorkExperience(detailInfo.workExperience).length>1">
                                      <el-popover
                                          placement="right"
                                          width="400"
                                          trigger="hover">
                                          <el-timeline  :reverse="true">
                                              <el-timeline-item
                                                  v-for="(activity, index) in handleWorkExperience(detailInfo.workExperience)"
                                                  :key="index" style="text-align: left">
                                                  {{activity}}
                                              </el-timeline-item>
                                          </el-timeline>
                                          <span class="more" slot="reference">更多 >></span>
                                      </el-popover>
                                  </el-col>
                              </el-card>
                          </el-col>
                          <el-col :span="8">
                              <el-card shadow="hover"  class="repaid" >
                                  <div class="cardTitleStyle">
                                      <el-image  class="smallTitle" src="../../../static/img/csj/bc.png"></el-image>
                                      <p>报酬情况</p>
                                  </div>
                                  <el-col :span="24" class="Secoll">
                                      <div v-if="!detailInfo.rewards">
                                          <el-image  style="width: 285px;height: 100px" src="../../../static/img/nrzw.png"></el-image>
                                      </div>
                                      <div v-else style="padding:25px 0 0 20px">
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">获取时间</span>
                                              <span class="baseCardVal">{{detailInfo.rewards[0].achieveTime ? new Date(detailInfo.rewards[0].achieveTime).getFullYear() + '年' : '未填'}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">基本报酬(元/年)</span>
                                              <span class="baseCardVal">{{detailInfo.rewards[0].basicReward||0}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">考核报酬(元/年)</span>
                                              <span class="baseCardVal">{{detailInfo.rewards[0].reviewReward||0}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">增收奖励(元/年)</span>
                                              <span class="baseCardVal">{{detailInfo.rewards[0].otherReward||0}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">其他(元/年)</span>
                                              <span class="baseCardVal">{{detailInfo.rewards[0].des||0}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">总报酬(元/年)</span>
                                              <span class="baseCardVal">{{detailInfo.rewards[0].totalReward}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">佐证材料</span>
                                              <span class="baseCardVal">
                                                  <el-popover
                                                      placement="right"
                                                      width="400"
                                                      trigger="hover" v-if="detailInfo.rewards[0].supportDoc">
                                                      <div v-for="subItem in handleImage(detailInfo.rewards[0].supportDoc)" >
                                                          <el-image :src="subItem"></el-image>
                                                      </div>
                                                      <el-button slot="reference" type="text">
                                                          <div class="el-icon-picture fileIcon"></div>
                                                      </el-button>
                                                  </el-popover>
                                                  <span v-else>暂无</span>
                                              </span>
                                          </el-col>
                                      </div>
                                  </el-col>
                                  <el-col :span="6" :offset="19">
                                      <el-popover
                                          placement="right"
                                          width="480"
                                          trigger="hover">
                                          <div class="popoverScroll">
                                              <div v-for="sub in detailInfo.rewards">
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">获取时间</span>
                                                      <span class="baseCardVal">{{sub.achieveTime ? new Date(sub.achieveTime).getFullYear() + '年' : '未填'}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">基本报酬(元/年)</span>
                                                      <span class="baseCardVal">{{sub.basicReward||0}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">考核报酬(元/年)</span>
                                                      <span class="valueStyle">{{sub.reviewReward}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">增收奖励(元/年)</span>
                                                      <span class="baseCardVal">{{sub.otherReward||0}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">其他(元/年)</span>
                                                      <span class="baseCardVal">{{sub.des||0}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">总报酬(元/年)</span>
                                                      <span class="baseCardVal">{{sub.totalReward||0}}</span>
                                                  </el-col>
                                                  <el-col :span="24" class="baseInfoCard" v-if="sub.supportDoc" >
                                                      <span class="baseCardLabel">佐证材料</span>
                                                      <div v-for="subItem in handleImage(sub.supportDoc)" class="popoverImage">
                                                          <el-image :src="subItem" ></el-image>
                                                      </div>
                                                  </el-col>
                                                  <el-col :span="24" class="baseInfoCard" v-else>
                                                      <span class="baseCardLabel">佐证材料</span>
                                                      <span class="baseCardLongVal">暂无</span>
                                                  </el-col>
                                                  <hr class="popoverLine">
                                              </div>
                                          </div>
                                          <span class="more" slot="reference" v-if="detailInfo.rewards&&detailInfo.rewards.length>1">更多 >></span>
                                      </el-popover>
                                  </el-col>
                              </el-card>
                          </el-col>
                </el-row>
                <el-row :gutter="10" style="margin-top: 40px">
                          <el-col :span="8">
                              <el-card shadow="hover"  class="family">
                                  <div class="cardTitleStyle">
                                      <el-image  class="smallTitle" src="../../../static/img/csj/gx.png"></el-image>
                                      <p>家庭主要成员及社会关系</p>
                                  </div>
                                  <el-col :span="24"  class="Secoll" >
                                      <div v-if="!detailInfo.familyInfoVOS">
                                          <el-image  style="width: 285px;height: 100px" src="../../../static/img/nrzw.png"></el-image>
                                      </div>
                                      <div v-else style="padding: 30px 0 0 20px">
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">姓名</span>
                                              <span class="baseCardVal">{{detailInfo.familyInfoVOS[0].name||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">称谓</span>
                                              <span class="baseCardVal">{{detailInfo.familyInfoVOS[0].appellation||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">出生年月</span>
                                              <span class="baseCardVal">{{detailInfo.familyInfoVOS[0].birthDay||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">政治面貌</span>
                                              <span class="baseCardVal">{{detailInfo.familyInfoVOS[0].politicalStatus||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="24" class="baseInfoCard">
                                              <span class="baseCardLabel">工作单位及职务</span>
                                              <span class="baseCardLongVal" >{{detailInfo.familyInfoVOS[0].orgAndJob||"暂无"}}</span>
                                          </el-col>
                                      </div>
                                  </el-col>
                                  <el-col :span="6" :offset="19">
                                      <el-popover
                                          placement="right"
                                          width="480"
                                          trigger="hover"
                                      >
                                          <div class="popoverScroll">
                                              <div v-for="sub in detailInfo.familyInfoVOS">
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">姓名</span>
                                                      <span class="baseCardVal">{{sub.name||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">称谓</span>
                                                      <span class="baseCardVal">{{sub.appellation||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">出生年月</span>
                                                      <span class="baseCardVal">{{sub.birthDay||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">政治面貌</span>
                                                      <span class="baseCardVal">{{sub.politicalStatus||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="24" class="baseInfoCard">
                                                      <span class="baseCardLabel">工作单位及职务</span>
                                                      <span class="baseCardLongVal">{{sub.orgAndJob||"暂无"}}</span>
                                                  </el-col>
                                                  <hr class="popoverLine">
                                              </div>
                                          </div>
                                          <span class="more" slot="reference" v-if="detailInfo.familyInfoVOS&&detailInfo.familyInfoVOS.length>1">更多 >></span>
                                      </el-popover>
                                  </el-col>

                              </el-card>
                          </el-col>
                          <el-col :span="8">
                              <el-card shadow="hover"  class="inCountry">
                                  <div class="cardTitleStyle">
                                      <el-image  class="smallTitle" src="../../../static/img/csj/relation.png"></el-image>
                                      <p>在村工作具有近亲属关系人员</p>
                                  </div>
                                  <el-col :span="24"  class="Secoll">
                                      <div v-if="!detailInfo.familyWorkInfoVOS">
                                          <el-image  style="width: 285px;height: 100px" src="../../../static/img/nrzw.png"></el-image>
                                      </div>
                                      <div v-else>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">姓名</span>
                                              <span class="baseCardVal">{{detailInfo.familyWorkInfoVOS[0].name||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">称谓</span>
                                              <span class="baseCardVal">{{detailInfo.familyWorkInfoVOS[0].appellation||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">政治面貌</span>
                                              <span class="baseCardVal">{{detailInfo.familyWorkInfoVOS[0].politicalStatus||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">职务</span>
                                              <span class="baseCardVal">{{detailInfo.familyWorkInfoVOS[0].job||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">在村工作时长</span>
                                              <span class="baseCardVal">{{detailInfo.familyWorkInfoVOS[0].duration ? detailInfo.familyWorkInfoVOS[0].duration + '年' : '暂无'}}</span>
                                          </el-col>
                                      </div>
                                  </el-col>
                                  <el-col :span="6" :offset="19">
                                      <el-popover
                                          placement="right"
                                          width="480"
                                          trigger="hover">
                                          <div class="popoverScroll">
                                              <div  v-for="sub in detailInfo.familyWorkInfoVOS">
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">姓名</span>
                                                      <span class="baseCardVal">{{sub.name||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">称谓</span>
                                                      <span class="baseCardVal">{{sub.appellation||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">政治面貌</span>
                                                      <span class="baseCardVal">{{sub.politicalStatus||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">职务</span>
                                                      <span class="baseCardVal">{{sub.job||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="24" class="baseInfoCard">
                                                      <span class="baseCardLabel">在村工作时长</span>
                                                      <span class="baseCardLongVal">{{sub.duration ? sub.duration + '年' : '暂无'}}</span>
                                                  </el-col>
                                                  <hr class="popoverLine">
                                              </div>
                                          </div>
                                          <span class="more" slot="reference" v-if="detailInfo.familyWorkInfoVOS&&detailInfo.familyWorkInfoVOS.length>1">更多 >></span>
                                      </el-popover>
                                  </el-col>
                              </el-card>
                          </el-col>
                          <el-col :span="8">
                              <el-card shadow="hover" class="honer" >
                                  <div class="cardTitleStyle">
                                      <el-image  class="smallTitle"  src="../../../static/img/csj/jc.png"></el-image>
                                      <p>奖惩情况</p>
                                  </div>
                                  <el-col :span="24" class="Secoll"  >
                                      <div v-if="!detailInfo.honours">
                                          <el-image  style="width: 285px;height: 100px" src="../../../static/img/nrzw.png"></el-image>
                                      </div>
                                      <div v-else>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">奖或惩</span>
                                              <span class="baseCardVal">{{detailInfo.honours[0].rewardsType||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">时间</span>
                                              <span class="baseCardVal">{{detailInfo.honours[0].achieveTime||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard" v-show="detailInfo.honours[0].rewardsType == '表彰'">
                                              <span class="baseCardLabel">表彰级别</span>
                                              <span class="baseCardVal">{{detailInfo.honours[0].honourDescription||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard" v-show="detailInfo.honours[0].rewardsType == '表彰'">
                                              <span class="baseCardLabel">特殊表彰</span>
                                              <span class="baseCardVal">{{detailInfo.honours[0].honourType||'暂无'}}</span>
                                          </el-col>
                                          <el-col :span="24" class="baseInfoCard" >
                                              <span class="baseCardLabel">奖惩内容</span>
                                              <span class="baseCardLongVal">{{detailInfo.honours[0].content||'暂无'}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">佐证材料</span>
                                              <span class="baseCardVal">
                                                  <el-popover
                                                      placement="right"
                                                      width="400"
                                                      trigger="hover" v-if="detailInfo.honours[0].supportDoc">
                                                      <div v-for="subItem in handleImage(detailInfo.honours[0].supportDoc)" >
                                                          <el-image :src="subItem"></el-image>
                                                      </div>
                                                      <el-button slot="reference" type="text">
                                                          <div class="el-icon-picture fileIcon"></div>
                                                      </el-button>
                                                  </el-popover>
                                                  <span v-else>暂无</span>
                                              </span>
                                          </el-col>
                                      </div>
                                  </el-col>
                                  <el-col :span="6" :offset="19">
                                      <el-popover
                                          placement="right"
                                          width="480"
                                          trigger="hover">
                                          <div class="popoverScroll">
                                              <div v-for="sub in detailInfo.honours" >
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">奖或惩</span>
                                                      <span class="baseCardVal">{{sub.rewardsType||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">时间</span>
                                                      <span class="baseCardVal">{{sub.achieveTime||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard" v-show="sub.rewardsType == '表彰'">
                                                      <span class="baseCardLabel">表彰级别</span>
                                                      <span class="baseCardVal">{{sub.honourDescription||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard" v-show="sub.rewardsType == '表彰'">
                                                      <span class="baseCardLabel">特殊表彰</span>
                                                      <span class="baseCardVal">{{sub.honourType||'暂无'}}</span>
                                                  </el-col>
                                                  <el-col :span="24" class="baseInfoCard" >
                                                      <span class="baseCardLabel">奖惩内容</span>
                                                      <span class="baseCardLongVal">{{sub.content||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="24" class="baseInfoCard" v-if="sub.supportDoc">
                                                      <span class="baseCardLabel">佐证材料</span>
                                                      <div v-for="subItem in handleImage(sub.supportDoc)" class="popoverImage">
                                                          <el-image :src="subItem"></el-image>
                                                      </div>
                                                  </el-col>
                                                  <el-col :span="24"  class="baseInfoCard" v-else>
                                                      <label><span class="baseCardLabel">佐证材料</span>
                                                          <span class="baseCardLongVal" >暂无</span>
                                                      </label>
                                                  </el-col>
                                                  <hr class="popoverLine">
                                              </div>
                                          </div>
                                          <span class="more" slot="reference" v-if="detailInfo.honours&&detailInfo.honours.length>1">更多 >></span>
                                      </el-popover>
                                  </el-col>
                              </el-card>
                          </el-col>
                </el-row>
                <el-row :gutter="10" style="margin-top: 40px">
                          <el-col :span="8">
                              <el-card shadow="hover" class="train" >
                                  <div class="cardTitleStyle" >
                                      <el-image  class="smallTitle"  src="../../../static/img/csj/px.png"></el-image>
                                      <p style="margin-left: 10px">培训情况</p>
                                  </div>
                                  <el-col :span="24"  class="Secoll">
                                      <div v-if="!detailInfo.trainingInfoVOS">
                                          <el-image  style="width: 285px;height: 100px" src="../../../static/img/nrzw.png"></el-image>
                                      </div>
                                      <div v-else>
                                          <el-col :span="24" class="baseInfoCard">
                                              <span class="baseCardLabel">培训名称</span>
                                              <span class="baseCardLongVal">
                                                  <el-tooltip :content="detailInfo.trainingInfoVOS[0].trainingName" placement="top" v-if="detailInfo.trainingInfoVOS[0].trainingName&&detailInfo.trainingInfoVOS[0].trainingName.length>22">
                                                    <span>{{detailInfo.trainingInfoVOS[0].trainingName.substring(0,21)}}...</span>
                                                  </el-tooltip>
                                                  <span v-else>
                                                      {{detailInfo.trainingInfoVOS[0].trainingName||"暂无"}}
                                                  </span>
                                              </span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">培训类型</span>
                                              <span class="baseCardVal">{{detailInfo.trainingInfoVOS[0].trainingType||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">培训等级</span>
                                              <span class="baseCardVal">{{detailInfo.trainingInfoVOS[0].trainingGrade||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">培训时间</span>
                                              <span class="baseCardVal">{{detailInfo.trainingInfoVOS[0].trainingDuration||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">培训天数</span>
                                              <span class="baseCardVal">{{detailInfo.trainingInfoVOS[0].trainingDays||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="24" class="baseInfoCard">
                                              <span class="baseCardLabel">培训内容</span>
                                              <span class="baseCardLongVal">
                                                  {{detailInfo.trainingInfoVOS[0].content||"暂无"}}</span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">培训成果</span>
                                              <span class="baseCardVal">
                                                  <el-tooltip :content="detailInfo.trainingInfoVOS[0].trainingResults" placement="top" v-if="detailInfo.trainingInfoVOS[0].trainingResults&&detailInfo.trainingInfoVOS[0].trainingResults.length>7">
                                                    <span>{{detailInfo.trainingInfoVOS[0].trainingResults.substring(0,5)}}...</span>
                                                  </el-tooltip>
                                                  <span v-else>
                                                      {{detailInfo.trainingInfoVOS[0].trainingResults||"暂无"}}
                                                  </span>
                                              </span>
                                          </el-col>
                                          <el-col :span="12" class="baseInfoCard">
                                              <span class="baseCardLabel">佐证材料</span>
                                              <span class="baseCardVal">
                                                  <el-popover
                                                      placement="right"
                                                      width="400"
                                                      trigger="hover" v-if="detailInfo.trainingInfoVOS[0].supportDoc">
                                                      <div v-for="subItem in handleImage(detailInfo.trainingInfoVOS[0].supportDoc)" >
                                                          <el-image :src="subItem"></el-image>
                                                      </div>
                                                      <el-button slot="reference" type="text">
                                                          <div class="el-icon-picture fileIcon"></div>
                                                      </el-button>
                                                  </el-popover>
                                                  <span v-else>暂无</span>
                                              </span>
                                          </el-col>
                                      </div>
                                  </el-col>
                                  <el-col :span="6" :offset="19">
                                      <el-popover
                                          placement="right"
                                          width="480"
                                          trigger="hover">
                                          <div class="popoverScroll">
                                              <div v-for="sub in detailInfo.trainingInfoVOS" >
                                                  <el-col :span="24" class="baseInfoCard">
                                                      <span class="baseCardLabel">培训名称</span>
                                                      <span class="baseCardLongVal">{{sub.trainingName||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">培训类型</span>
                                                      <span class="baseCardVal">{{sub.trainingType||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">培训等级</span>
                                                      <span class="baseCardVal">{{sub.trainingGrade||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">培训时间</span>
                                                      <span class="baseCardVal">{{sub.trainingDuration||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="12" class="baseInfoCard">
                                                      <span class="baseCardLabel">培训天数</span>
                                                      <span class="baseCardVal">{{sub.trainingDays||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="24" class="baseInfoCard">
                                                      <span class="baseCardLabel">培训内容</span>
                                                      <span class="baseCardLongVal">{{sub.content||"暂无"}}</span>
                                                  </el-col>
                                                  <el-col :span="24" class="baseInfoCard">
                                                      <span class="baseCardLabel">培训成果</span>
                                                      <span class="baseCardLongVal">{{sub.trainingResults||"暂无"}}</span>
                                                  </el-col>

                                                  <el-col :span="24" class="baseInfoCard" v-if="sub.supportDoc">
                                                    <span class="baseCardLabel">佐证材料</span>
                                                      <div v-for="subItem in handleImage(sub.supportDoc)" class="popoverImage">
                                                          <el-image :src="subItem"></el-image>
                                                      </div>
                                                  </el-col>
                                                  <el-col :span="24"  class="baseInfoCard"  v-else>
                                                      <label><span class="baseCardLabel">佐证材料</span>
                                                          <span class="baseCardLongVal" >暂无</span>
                                                      </label>
                                                  </el-col>
                                                  <hr class="popoverLine">
                                              </div>
                                          </div>
                                          <span class="more" slot="reference" v-if="detailInfo.trainingInfoVOS&&detailInfo.trainingInfoVOS.length>1">更多 >></span>
                                      </el-popover>
                                  </el-col>
                              </el-card>
                          </el-col>
                </el-row>
                <el-row :gutter="10" style="margin: 40px 0">
                        <el-col :span="24">
                            <el-card shadow="hover"  class="assessment" >
                                <div class="cardTitleStyle">
                                    <el-image class="smallTitle" src="../../../static/img/csj/kh.png"></el-image>
                                    <p>考核情况</p>
                                </div>
                                <el-col :span="24"  class="Secoll" style="padding: 0 20px!important;">
                                    <div  class="show-self" style="font-size: 15px">
                                        <div style=" text-align: left">
                                            <span class="lableColor">考核情况：</span>
                                            <span class="valueStyle">{{detailInfo.annualAssessment||'暂无'}}</span>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="6" :offset="19">
                                    <el-popover
                                        placement="right"
                                        width="400"
                                        trigger="hover">
                                        <div  class="show-self" style="font-size: 15px">
                                            <div style=" text-align: left">
                                                <span class="lableColor">考核情况：</span>
                                                <span class="valueStyle">{{detailInfo.annualAssessment}}</span>
                                            </div>
                                        </div>
                                        <span v-if="detailInfo.annualAssessment" class="more" slot="reference">更多 >></span>
                                    </el-popover>
                                </el-col>
                            </el-card>
                        </el-col>
                </el-row>
              </div>
        </el-dialog>
        <el-dialog width="30%"
                   title="选择需要导出的字段"
                   :visible.sync="transferVis"
                   append-to-body
                   :before-close="handleTransferClose">
            <el-transfer  :titles="['可选择字段', '导出字段']" v-model="transferValue" :data="transferData"></el-transfer>
            <div slot="footer" class="dialog-footer  footer-position">
                <el-button type="primary" @click="downFile()">确 定</el-button>
                <el-button @click="handleTransferClose">返 回</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import CommonCRUD from "@/components/CommonCRUD";
    import HonoursStrcutre from "@/views/data/HonoursStrcutre";
    import { swiper, swiperSlide } from 'vue-awesome-swiper';
    import CountTo from 'vue-count-to';
    import SecretaryExport from "./SecretaryExport";
    export default {
        name: "SecretaryStatistics",
        data(){
            return{
                showTitle : true,
                dqwidth : 'width:70%;float: left;margin-left: 30px;',
                dqFd : true,
                dqSx : false,
                isshow:true,
                dealWidth : 'width:400px;margin-top: 10px',
                dialogTableVisible: true,
                sxHz: false,
                colorList:['#7fb1b7','#db9982','#a5d0bc','#8eb09a','#cb9444','#7d7b91'],
                dialogVisible:false,
                honoursDiaVis:false,
                columns:[],
                query:[],
                apiRoot:'identity/villageCadres',
                queryApiRoot:'identity/statistics',
                queryForm:[
                    {
                        name: 'cadresType',
                        type: 'string',
                        value: 'SECRETARY',
                        visible: false
                    },
                    {
                        name: 'districtId',
                        type: 'string',
                        value: JSON.parse(sessionStorage.getItem("userInfo")).districtId,
                        visible: false
                    },
                    {
                        name:'hasRetire',
                        type: 'string',
                        value: '0',
                        visible: false

                    }
                ],
                districtId:JSON.parse(sessionStorage.getItem("userInfo")).districtId,
                cadresType:"SECRETARY", // 村书记
                honoursColumns:HonoursStrcutre.columns,
                honoursQuery:[
                    {
                        name: 'rewardsType',
                        type: 'string',
                        value: '',
                        visible: false
                    },
                    {
                        name: 'honourDescription',
                        type: 'string',
                        value: '',
                        visible: false
                    },
                    {
                        name: 'districtId',
                        type: 'string',
                        value: JSON.parse(sessionStorage.getItem("userInfo")).districtId,
                        visible: false
                    },
                ],
                swiperOption: {
                    freeMode: false,
                    direction: 'horizontal',
                    slidesPerView: 1,
                    spaceBetween: 30,
                    mousewheel: true,
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    paginationBulletRender(swiper, index, className) {
                        let nameList = ['年龄结构分析', '人员类型分析', '任职年限分析',  '报酬结构分析', '党龄情况分析', '自定义分析'];
                         return '<div class=" ' + className + '  primary "   id="passage'+index+'" >' + nameList[index] + '</div>'
                        // return '<button class="primary" id="passage'+index+'" ><span style="display: inline-block" class="' + className + ' swiper-pagination-bullet-custom"></span><span>' + nameList[index] + '</span></button>'
                    },
                    onSlideChangeEnd: (swiper) => {
                        /*this.query = [
                            {
                                name: 'cadresType',
                                type: 'string',
                                value: 'SECRETARY',
                                visible: false
                            },
                            {
                                name: 'districtId',
                                type: 'string',
                                value: JSON.parse(sessionStorage.getItem("userInfo")).districtId,
                                visible: false
                            },
                        ];*/
                      //  console.log(this.query)
                        this.activeIndex = swiper.activeIndex;
                        this.activeItemIndex = ''
                    },
                },
                ageList: [],
                eduList: [],
                sexList: [],
                personTypeList: [],
                workDurationList: [],
                rankList: [],
                rewardList: [],
                partyStandingList: [],
                honourList: [],
                activeIndex: 0,
                fieldForm: {},
                fields: [],
                queryFields: [],
                activityList:[],
                project:[
                    ['性别'],
                    ['年龄'],
                    ['学历'],
                    ['工作'],
                    ['在职时间'],
                    ['党龄'],
                    ['表彰'],
                    ['惩罚'],
                ],
                projectList:{
                    '性别':['男',   '女'],
                    '年龄':['35岁以下','36岁','37岁','38岁','39岁','40岁', '41岁', '42岁','43岁','44岁','45岁','46岁','47岁','48岁','49岁','50岁','50岁以上'],
                   '学历':['研究生','本科','大专','高中及以下'],
                    '工作':['公务员','事业编制','企业主','全职村干部'],
                    '在职时间':['在职时间1年以下','在职时间1-5年','在职时间6-10年','在职时间11-15年','在职时间16-20年','在职时间20年以上'],
                    '级别':['一级村干部','二级村干部','三级村干部','四级村干部','五级村干部'],
                    '党龄':['党龄小于1年','党龄1-5年','党龄6-10年','党龄11-15年','党龄16-20年','党龄20年以上'],
                   '表彰':['获得句容市级表彰次数','获得镇江市级表彰次数','获得省级表彰次数','获得党中央国务院表彰次数',],
                   '惩罚':['获得句容市级处分次数','获得镇江市级处分次数','获得省级处分次数','获得党中央国务院处分次数',]
                },
                ageQuery:[],
                personTypeQuery:[],
                workDurationQuery:[],
                rankQuery:[],
                partyStandingQuery:[],
                queryResult:false,
                transferVis:false,
                transferValue: [],
                transferData: [],
                searchTypeOption:[
                    {label:'大于',value:'大于'},
                    {label:'小于',value:'小于'},
                    {label:'等于',value:'等于'},
                    {label:'大于等于',value:'大于等于'},
                    {label:'小于等于',value:'小于等于'},
                    {label:'在范围内',value:'在范围内'},
                    {label:'模糊匹配',value:'模糊匹配'},
                ],
                personQueryFields:[],//自定义查询人员查询条件
                activeItemIndex: '',
                tableType: [{
                  id: '1',
                  name: '基本人员信息表',
                  value: '基本人员信息表'
                },{
                  id: '2',
                  name: '报酬信息表',
                  value: '报酬信息表'
                }],
                queryTableType: '',
                classId: '',
                showBaseInfoDiaVis: false,
                detailInfo: {}
            }
        },
        methods:{
            handelSxFd(){
                this.dialogTableVisible = true;
                this.dqwidth = 'width:70%;float: left;margin-left: 30px;'
                this.dqFd = true;
                this.dqSx = false;
                this.showTitle = true
            },
            handelDqFd(){
                this.dialogTableVisible = false;
                this.dqwidth = 'width:100%;float: left;margin-left:10px'
                this.dqFd = false;
                this.dqSx = true;
                this.showTitle = false
            },
            handelFd(){
                this.dialogTableVisible = false;
                this.dealWidth =  'width:1600px;margin-top: 50px'
                this.sxHz = true;
                this.dqFd = false;
                this.isshow = false
            },
            handelSx(){
                this.dialogTableVisible = true;
                this.dealWidth =  'width:400px;margin-top: 10px'
                this.sxHz = false;
                this.dqFd = true;
                this.isshow = true;
            },

            showData(url){
              return this.$http('GET',`/identity/statistics/`+url+"/"+this.districtId+"/"+this.cadresType).then(data =>{
                  return data;
                })
            },
            initAge(){
                this.showData('getAgeStatistics').then(data => {
                    let xData = [];
                    let lineData = [];
                    let yData = [];
                    this.ageList = data.content;
                    /*柱状图*/
                    /*data.content.forEach(item=>{
                        if(item.name.indexOf("周岁")!=-1){
                            xData.push(item.name);
                            yData.push(item.val);
                        }else{
                            lineData[item.name] = item.val;
                        }
                    });*/
                    /*饼图*/
                    data.content.forEach(item=>{
                        if(item.name.indexOf("周岁")!=-1){
                            xData.push(item.name);
                            yData.push({name:item.name,value:item.val})
                        }
                    })
                    this.$nextTick(()=>{
                        this.showAge(xData,yData,lineData);
                    })
                });
            },
            updateReward(index) {
                this.activeItemIndex = index;
                // index++;
                this.$http("GET", 'identity/statistics/getSalaryStatisticsList/'+index+"/"+this.cadresType+"/01", false).then(data => {
                    let xData = [];
                    let yData = [];
                    let legend = [];
                    data.forEach(item => {
                        xData.push(item.name);
                        yData.push(item.val);
                    });
                    this.$nextTick(()=>{
                        this.showReward(legend,xData,yData,this.rewardList[index].val);
                    })
                })
            },
            initEducation(){
                this.showData('getEduStatistics').then(data => {
                    let xData = [];
                    let yData = [];
                    this.eduList = data.content;
                    data.content.forEach(item=>{
                       xData.push(item.name);
                       yData.push({name:item.name,value:item.val});
                    });
                    this.$nextTick(()=>{
                        this.showEducation(xData,yData);
                    })
                });
            },
            initPersonType(){
                this.showData('getcadresTypeStatistics').then(data => {
                    let xData = [];
                    let yData = [];
                    this.personTypeList = data.content;
                    data.content.forEach(item=>{
                        xData.push(item.name);
                       // yData.push(item.val);
                        yData.push({name:item.name,value:item.val})
                    });
                    this.$nextTick(()=>{
                        this.showPersonType(xData,yData);
                    })
                });
            },
            initWorkDuration(){
                this.showData('getServingYearStatistics').then(data => {
                    let xData = [];
                    let yData = [];
                    this.workDurationList = data.content;
                    data.content.forEach(item=>{
                        xData.push(item.name);
                      //  yData.push(item.val);
                        yData.push({name:item.name,value:item.val})
                    });
                    this.$nextTick(()=>{
                        this.showWorkDuration(xData,yData);
                    });
                });
            },
            initRank(){
                this.showData('getRankStatistics').then(data => {
                    let xData = [];
                    let yData = [];
                    this.rankList = data.content;
                    data.content.forEach(item =>{
                        xData.push(item.name);
                       // yData.push(item.val);
                        yData.push({name:item.name,value:item.val})
                    });
                    this.$nextTick(()=>{
                        this.showRank(xData,yData);
                    })
                });
            },
            initReward(){
                this.showData('getSalaryStatistics').then(data => {
                    this.rewardList = data.content;
                    this.$http("GET", 'identity/statistics/getSalaryStatisticsList/0'+"/"+this.cadresType+"/01", false).then(data => {
                        let xData = [];
                        let yData = [];
                        let legend = [];
                        data.forEach(item => {
                            xData.push(item.name);
                            yData.push(item.val);
                        });
                        this.$nextTick(()=>{
                            this.showReward(legend,xData,yData,this.rewardList[0].val);
                        })
                    })

                });
            },
            initPartyStanding(){
                this.showData('getPartyStandingStatistics').then(data => {
                    let xData = [];
                    let yData = [];
                    this.partyStandingList = data.content;
                    data.content.forEach(item =>{
                        xData.push(item.name)
                       // yData.push(item.val);
                        yData.push({name:item.name,value:item.val})
                    });
                    this.$nextTick(()=>{
                        this.showPartyStanding(xData,yData);
                    })
                });
            },
            initHonours(){
                this.showData('getRewardsStatistics').then(data => {
                    let legend = [];
                    let xData = [];
                    let yData = [];
                    data.content.forEach((item,index) =>{
                        let para = {};
                        para.name = item.name;
                        para.val = 0;
                        legend.push(item.name);
                        let data = {};
                        data.name = item.name;
                        data.type = 'line';
                        data.stack = item.name;
                        let temp = [];
                        item.statistics.forEach(sub=>{
                            para.val = sub.val+para.val;
                            if(index===0){
                                xData.push(sub.name);
                            }
                            temp.push(sub.val)
                        });
                        data.data = temp;
                        yData.push(data);
                        this.honourList.push(para)
                    });
                    this.$nextTick(()=>{
                        this.showHonours(legend,xData,yData);
                    })
                });
            },
            showAge(xData,yData,lineData){
                let self = this;
               // console.log(self,1222222231)
                let ageChart = echarts.init(document.getElementById("age"));
              /*  let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: ['最低年龄', '最高年龄', '平均年龄',"年龄"]
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xData,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '人数',
                            axisLabel: {
                                formatter: '{value} 人'
                            }
                        },
                        {
                            type: 'value',
                            name: '年龄',
                            axisLabel: {
                                formatter: '{value} 周岁'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '最低年龄',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [lineData['最低年龄'],lineData['最低年龄'],lineData['最低年龄']]
                        },
                        {
                            name: '最高年龄',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [lineData['最高年龄'],lineData['最高年龄'],lineData['最高年龄']]
                        },
                        {
                            name: '平均年龄',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [lineData['平均年龄'],lineData['平均年龄'],lineData['平均年龄']]
                        },
                        {
                            name: '年龄',
                            type: 'bar',
                            data: yData,
                            barWidth:'50%'
                        },
                    ]
                };*/
                let option =  {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: xData
                    },
                    series: [
                        {
                            name: '人数',
                            selectedMode: 'single',
                            type: 'pie',
                            radius: '70%',
                            center: ['50%', '50%'],
                            data:yData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                ageChart.setOption(option);
                ageChart.on('click', function (params) {
                  //  console.log(params)
                    if(params.componentSubType==='pie'){
                        let agePara = {};
                        self.ageQuery = self.queryForm.concat();
                        if(params.name==='35周岁以下'){
                            agePara = {name: 'age', type: 'string', value: '35', visible: false};
                        }else if(params.name==='35-40周岁'){
                            agePara = {name: 'age', type: 'string', value: '40',visible: false};
                        }else if(params.name==='40-45周岁'){
                            agePara = {name: 'age', type: 'string', value: '45', visible: false};
                        }else if(params.name==='45-50周岁'){
                            agePara = {name: 'age', type: 'string', value: '50', visible: false};
                        }else if(params.name==='50周岁以上'){
                            agePara = {name: 'age', type: 'string', value: '-1', visible: false};
                        }
                        self.ageQuery.push(agePara);
                    }
                });
            },
            clickAge(item, index){
                if (index !== 0 && index !== 1) {
                  this.activeItemIndex = index;
                }
                let params = Object.assign(item);
                if(params.name.indexOf('年龄')>-1){
                    return ;
                };
                let self = this;
                let agePara = {};
                self.ageQuery = self.queryForm.concat();
                if(params.name==='35周岁以下'){
                    agePara = {name: 'age', type: 'string', value: '35', visible: false};
                }else if(params.name==='35-40周岁'){
                    agePara = {name: 'age', type: 'string', value: '40',visible: false};
                }else if(params.name==='40-45周岁'){
                    agePara = {name: 'age', type: 'string', value: '45', visible: false};
                }else if(params.name==='45-50周岁'){
                    agePara = {name: 'age', type: 'string', value: '50', visible: false};
                }else if(params.name==='50周岁以上'){
                    agePara = {name: 'age', type: 'string', value: '-1', visible: false};
                }
                self.ageQuery.push(agePara);
            },

            showEducation(xData,yData){
                let self = this;
                let eduChart = echarts.init(document.getElementById("education"));
                let option = {
                    color:self.colorList,
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: xData,
                    },
                    series: [
                        {
                            name: '村书记数量',
                            selectedMode: 'single',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: yData
                        }
                    ]
                };
                eduChart.setOption(option);
                eduChart.on('click', function (params) {
                    let educationPara = {name: 'education', type: 'string', value: params.name, visible: false};
                    self.query.push(educationPara);
                });
            },
            showSex(xData,yData){
                let self = this;
                let sexChart = echarts.init(document.getElementById("sex"));
                let option = {
                    color:['#7fb1b7','#db9982'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: xData
                    },
                    series: [
                        {
                            name: '村书记数量',
                            selectedMode: 'single',
                            type: 'pie',
                            radius: '80%',
                            center: ['50%', '50%'],
                            data: yData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                sexChart.setOption(option);
                sexChart.on('click', function (params) {
                    self.query = self.queryForm.concat();
                    let sexPara = {name: 'sex', type: 'string', value: params.name, visible: false};
                    self.query.push(sexPara);
                });
            },
            showPersonType(xData,yData){
                let self = this;
                let personTypeChart = echarts.init(document.getElementById("personType"));
              /*  let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xData,
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '村书记数量',
                            type: 'bar',
                            barWidth: '60%',
                            data: yData,
                            itemStyle: {
                                color:function (paras) {
                                    return self.colorList[paras.dataIndex];
                                }
                            }
                        }
                    ]
                };*/
                let option =  {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: xData
                    },
                    series: [
                        {
                            name: '人数',
                            selectedMode: 'single',
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            data:yData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                personTypeChart.setOption(option);
                personTypeChart.on('click', function (params) {
                    self.personTypeQuery = self.queryForm.concat();
                    let personPara = {name: 'personnelType', type: 'string', value: params.name, visible: false};
                    self.personTypeQuery.push(personPara);
                });
            },
            personType(item, index){
                let params = Object.assign(item);
                let self = this;
                this.activeItemIndex = index;
                self.personTypeQuery = self.queryForm.concat();
                let personPara = {name: 'personnelType', type: 'string', value: params.name, visible: false};
                self.personTypeQuery.push(personPara);
            },
            showWorkDuration(xData,yData){
                let self = this;
                let workChart = echarts.init(document.getElementById("workDuration"));
                /*let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data:yData,
                        type: 'bar',
                        itemStyle: {
                            color:function (paras) {
                                return self.colorList[paras.dataIndex];
                            }
                        }
                    }]
                };*/
                let option =  {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: xData
                    },
                    series: [
                        {
                            name: '人数',
                            selectedMode: 'single',
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            data:yData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                workChart.setOption(option);
                workChart.on('click', function (params) {
                    let workPara = {};
                    self.workDurationQuery = self.queryForm.concat();
                    if(params.name==='不满1年'){
                        workPara = {name: 'onDutyTime', type: 'string', value: '1', visible: false};
                    }else if(params.name==='1-5年'){
                        workPara = {name: 'onDutyTime', type: 'string', value: '5',visible: false};
                    }else if(params.name==='5-10年'){
                        workPara = {name: 'onDutyTime', type: 'string', value: '10', visible: false};
                    }else if(params.name==='10-15年'){
                        workPara = {name: 'onDutyTime', type: 'string', value: '15', visible: false};
                    }else if(params.name==='15-20年'){
                        workPara = {name: 'onDutyTime', type: 'string', value: '20', visible: false};
                    }else if(params.name==='20年以上'){
                        workPara = {name: 'onDutyTime', type: 'string', value: '-1', visible: false};
                    }
                    self.workDurationQuery.push(workPara);
                });
            },
            clickYear(item, index){
                let params = Object.assign(item);
                let self = this;
                this.activeItemIndex = index;
                let workPara = {};
                self.workDurationQuery = self.queryForm.concat();
                if(params.name==='不满1年'){
                    workPara = {name: 'onDutyTime', type: 'string', value: '1', visible: false};
                }else if(params.name==='1-5年'){
                    workPara = {name: 'onDutyTime', type: 'string', value: '5',visible: false};
                }else if(params.name==='5-10年'){
                    workPara = {name: 'onDutyTime', type: 'string', value: '10', visible: false};
                }else if(params.name==='10-15年'){
                    workPara = {name: 'onDutyTime', type: 'string', value: '15', visible: false};
                }else if(params.name==='15-20年'){
                    workPara = {name: 'onDutyTime', type: 'string', value: '20', visible: false};
                }else if(params.name==='20年以上'){
                    workPara = {name: 'onDutyTime', type: 'string', value: '-1', visible: false};
                }
                self.workDurationQuery.push(workPara);
            },
            showRank(xData,yData){
                let self = this;
                let rankChart = echarts.init(document.getElementById("rank"));
                /*let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xData,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '村书记数量',
                            type: 'bar',
                            barWidth: '60%',
                            data:yData,
                            itemStyle: {
                                color:function (paras) {
                                    return self.colorList[paras.dataIndex];
                                }
                            }
                        }
                    ]
                };*/
                let option =  {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: xData
                    },
                    series: [
                        {
                            name: '人数',
                            selectedMode: 'single',
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            data:yData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                rankChart.setOption(option);
                rankChart.on('click', function (params) {
                    let rankPara = {};
                    self.rankQuery = self.queryForm.concat();
                    if(params.name==='一级专职村书记'){
                        rankPara = {name: 'quasiAssessmentRank', type: 'string', value: params.name, visible: false};
                    }else if(params.name==='二级专职村书记'){
                        rankPara = {name: 'quasiAssessmentRank', type: 'string', value: params.name,visible: false};
                    }else if(params.name==='三级专职村书记'){
                        rankPara = {name: 'quasiAssessmentRank', type: 'string', value: params.name, visible: false};
                    }else if(params.name==='四级专职村书记'){
                        rankPara = {name: 'quasiAssessmentRank', type: 'string', value: params.name, visible: false};
                    }else if(params.name==='五级专职村书记'){
                        rankPara = {name: 'quasiAssessmentRank', type: 'string', value: params.name, visible: false};
                    }
                    self.rankQuery.push(rankPara);
                });
            },

            clickOb(item){
                let params = Object.assign(item);
                let self = this;
                let rankPara = {};
                self.rankQuery = self.queryForm.concat();
                if(params.name==='一级专职村书记'){
                    rankPara = {name: 'quasiAssessmentRank', type: 'string', value: params.name, visible: false};
                }else if(params.name==='二级专职村书记'){
                    rankPara = {name: 'quasiAssessmentRank', type: 'string', value: params.name,visible: false};
                }else if(params.name==='三级专职村书记'){
                    rankPara = {name: 'quasiAssessmentRank', type: 'string', value: params.name, visible: false};
                }else if(params.name==='四级专职村书记'){
                    rankPara = {name: 'quasiAssessmentRank', type: 'string', value: params.name, visible: false};
                }else if(params.name==='五级专职村书记'){
                    rankPara = {name: 'quasiAssessmentRank', type: 'string', value: params.name, visible: false};
                }
                self.rankQuery.push(rankPara);

            },
            showReward(legend,xData,yData,avg){
                let self = this;
                let rewardChart = echarts.init(document.getElementById("reward"));
                let option = {
                    tooltip: {
                        trigger: 'axis',
                    },
                   /* legend: {
                        bottom: 10,
                        left: 'center',
                        data: legend || {}
                    },*/
                  /*  grid: {
                        left: '10%',
                        right: '10%',
                        bottom: '10%',
                        top:'10%',
                        containLabel: true
                    },*/
                    xAxis: {
                        type: 'category',
                        data: xData
                    },
                    yAxis: {
                        type: 'value',
                        name:'元'
                    },
                    series: [{
                        data:yData,
                        type:'bar',
                        barWidth: 60,
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter: function (val) {
                                        return `${val.value}元`
                                    },
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                        fontSize: 16,
                                        fontWeight: 'bold'
                                    }
                                },
                                color: '#55bd94'
                            }
                        },
                        markPoint: {
                            data: [
                                {
                                    type: 'max', name: '最大值',color:'#fff',
                                    itemStyle:{
                                        color: '#0d8dea',
                                    }
                                },
                                {
                                    type: 'min', name: '最小值',color:'#fff',
                                    itemStyle:{
                                        color: '#cf3c32',
                                    }
                                }
                            ],
                            symbolOffset: ['0%', '-50%'],
                            symbolSize: [70,50],
                            label:{
                                formatter: function (data){
                                    return data.name;
                                }
                            },
                        },
                        markLine : {
                            data : [{
                                yAxis: avg          // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                            }],
                            lineStyle: {
                                normal: {
                                    color: '#fa4f47',
                                },
                            },
                        }
                    }]
                };
                rewardChart.setOption(option);
                /*rewardChart.on('click', function (params) {
                    self.dialogVisible = true;
                });*/
            },
            showPartyStanding(xData,yData){
                let self = this;
                let partyStandingChart = echarts.init(document.getElementById("partyStanding"));
               /* let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xData,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '村书记数量',
                            type: 'bar',
                            barWidth: '60%',
                            data: yData,
                            itemStyle: {
                                color:function (paras) {
                                    return self.colorList[paras.dataIndex];
                                }
                            }
                        }
                    ]
                };*/
                let option =  {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: xData
                    },
                    series: [
                        {
                            name: '人数',
                            selectedMode: 'single',
                            type: 'pie',
                            radius: [0, '65%'],
                            center: ['50%', '50%'],
                            data:yData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                partyStandingChart.setOption(option);
                partyStandingChart.on('click', function (params) {
                    let partyPara = {};
                    self.partyStandingQuery = self.queryForm.concat();
                    if(params.name==='不满1年'){
                        partyPara = {name: 'enterPartyTime', type: 'string', value: '1', visible: false};
                    }else if(params.name==='1-5年'){
                        partyPara = {name: 'enterPartyTime', type: 'string', value: '5',visible: false};
                    }else if(params.name==='5-10年'){
                        partyPara = {name: 'enterPartyTime', type: 'string', value: '10', visible: false};
                    }else if(params.name==='10-15年'){
                        partyPara = {name: 'enterPartyTime', type: 'string', value: '15', visible: false};
                    }else if(params.name==='15-20年'){
                        partyPara = {name: 'enterPartyTime', type: 'string', value: '20', visible: false};
                    }else if(params.name==='20-30年'){
                        partyPara = {name: 'enterPartyTime', type: 'string', value: '30', visible: false};
                    }else if(params.name==='30-40年'){
                        partyPara = {name: 'enterPartyTime', type: 'string', value: '40', visible: false};
                    }else if(params.name==='40-50年'){
                        partyPara = {name: 'enterPartyTime', type: 'string', value: '50', visible: false};
                    }else if(params.name==='50年以上'){
                        partyPara = {name: 'enterPartyTime', type: 'string', value: '-1', visible: false};
                    }
                    self.partyStandingQuery.push(partyPara);
                });
            },
            partgeType(item, index){
                let self = this;
                let partyPara = {};
                this.activeItemIndex = index;
                self.partyStandingQuery = self.queryForm.concat();
                let params = Object.assign(item);
                if(params.name==='不满1年'){
                    partyPara = {name: 'enterPartyTime', type: 'string', value: '1', visible: false};
                }else if(params.name==='1-5年'){
                    partyPara = {name: 'enterPartyTime', type: 'string', value: '5',visible: false};
                }else if(params.name==='5-10年'){
                    partyPara = {name: 'enterPartyTime', type: 'string', value: '10', visible: false};
                }else if(params.name==='10-15年'){
                    partyPara = {name: 'enterPartyTime', type: 'string', value: '15', visible: false};
                }else if(params.name==='15-20年'){
                    partyPara = {name: 'enterPartyTime', type: 'string', value: '20', visible: false};
                }else if(params.name==='20-30年'){
                    partyPara = {name: 'enterPartyTime', type: 'string', value: '30', visible: false};
                }else if(params.name==='30-40年'){
                    partyPara = {name: 'enterPartyTime', type: 'string', value: '40', visible: false};
                }else if(params.name==='40-50年'){
                    partyPara = {name: 'enterPartyTime', type: 'string', value: '50', visible: false};
                }else if(params.name==='50年以上'){
                    partyPara = {name: 'enterPartyTime', type: 'string', value: '-1', visible: false};
                }
                self.partyStandingQuery.push(partyPara);
            },
            showHonours(legend,xData,yData){
                let self = this;
                let honoursChart = echarts.init(document.getElementById("honours"));
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: legend
                    },
                    grid: {
                        left: '10%',
                        right: '10%',
                        bottom: '10%',
                        top:'10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: yData
                };
                honoursChart.setOption(option);
                honoursChart.on('click', function (params) {
                    self.honoursQuery.filter(item=>item.name==='rewardsType')[0].value = params.seriesName;
                    self.honoursQuery.filter(item=>item.name==='honourDescription')[0].value = params.name;
                });
            },
            handleClose(){
                this.dialogVisible = false;
            },
            handleHonoursClose(){
                this.honoursDiaVis = false;
            },
            downLoad(){
                this.transferData = [];
                this.fields.forEach(item=>{
                    this.transferData.push({label:item.des,key:item.id+"&"+item.name+"&"+item.des})
                })
                this.transferVis = true;
            },
            downFile(){
                let valueArr = [];
                this.transferValue.forEach(item=>{
                    valueArr.push({filedName:item.split("&")[1],filedDesc:item.split("&")[2]})
                });
                let para = {
                    searchFields:this.queryFields,
                    exportFields:valueArr,
                };
                this.$http('POST',`identity/statistics/export?cadresType=${this.cadresType}`,para,false).then( content =>{
                     window.open(content.file);
                });
                this.transferValue = [];
                this.transferVis = false;
            },
            handleTransferClose(){
                this.transferValue = [];
                this.transferVis = false;
            },
            loadFields() {
                this.$http('POST', '/identity/sysClassProperty/list', {classId: this.classId}, false).then(
                    data => {
                        if (data.length !== 0) {
                            this.fields = data;
                        }
                    console.log(data, 'data');
                    }
                    
                )
            },
            del(index) {
                this.queryFields.splice(index, 1);
            },
            addToList() {
                this.queryFields.push({filedType:'',des:''});
               /* this.queryFields.push(Object.assign({}, this.fieldForm));*/
            },
            loadQueryFields() {

                this.$http('POST', `/identity/statistics/getCustomStatistics?cadresType=${this.cadresType}`, this.queryFields, false).then(
                    data => {
                        if(data){
                            this.queryResult = true;
                            this.personQueryFields = this.queryFields.concat();
                            this.$nextTick(()=>{
                                let xData = [];
                                let yData = [];
                                data.statistics.forEach(item => {
                                    xData.push(item.name);
                                    yData.push(item.val);
                                })
                                this.showQueryResult(xData, yData);
                            })
                        }else{
                            this.$message({
                                type:'warning',
                                message:'查询条件不符合要求，请输入符合要求的查询条件！'
                            })
                        }
                    }
                )
            },
            loadAllstatistic() {
                this.$http('get', '/identity/statistics/getAllStatistics', false).then(
                    data => {
                     let arr = ['男', '女','35岁以下','36岁','37岁','38岁','39岁','40岁', '41岁', '42岁','43岁','44岁','45岁','46岁','47岁','48岁','49岁','50岁','50岁以上',
                         '研究生','本科','大专','高中及以下','公务员','事业编制','企业主','全职村干部',
                         '在职时间1年以下','在职时间1-5年','在职时间6-10年','在职时间11-15年','在职时间16-20年','在职时间20年以上'
                         ,'一级村干部','二级村干部','三级村干部','四级村干部','五级村干部',
                         ,'党龄小于1年','党龄1-5年','党龄6-10年','党龄11-15年','党龄16-20年','党龄20年以上',
                         '获得句容市级表彰次数','获得镇江市级表彰次数','获得省级表彰次数','获得党中央国务院表彰次数',
                         '获得句容市级处分次数','获得镇江市级处分次数','获得省级处分次数','获得党中央国务院处分次数'
                     ]
                     let tempArr = [];
                     data.content.forEach(item => {
                         let split = item.value.split('_');
                         let temp = {
                             name: item.name
                         }
                         arr.forEach((item, index) => {
                             temp[item] = split[index];
                         });
                         tempArr.push(temp)
                     });
                     this.activityList =  tempArr;
                    }
                )
            },
            getType(val,index) {
                this.fields.forEach(item => {
                    if (item.name === val) {
                        console.log(this.queryFields,item.type,item.des)
                        this.queryFields[index].filedType = item.type;
                        this.queryFields[index].des = item.des;
                    }
                })
            },
            showQueryResult(xData,yData){
                let self = this;
                let queryChart = echarts.init(document.getElementById("query-result"));
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: xData
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xData,
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLabel: {
                                interval:0,
                                rotate:45
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '人数',
                            axisLabel: {
                                formatter: '{value} 人'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '人数',
                            type: 'bar',
                            data: yData,
                            barWidth:'60%',
                            itemStyle: {
                                normal: {
                                    label: {
                                        formatter: function (val) {
                                            return `${val.value}人`
                                        },
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: '#999',
                                            fontSize: 14,
                                            fontWeight: 'bold'
                                        }
                                    },
                                    color: function(params) {
                                        return self.colorList[params.dataIndex%6]
                                    }
                                }
                            },
                        },
                    ]
                };
                queryChart.setOption(option);
                /*ageChart.on('click', function (params) {
                    if(params.componentSubType==='bar'){
                        let agePara = {};
                        if(params.name==='35周岁以下'){
                            agePara = {name: 'age', type: 'string', value: '35', visible: false};
                        }else if(params.name==='35-50周岁'){
                            agePara = {name: 'age', type: 'string', value: '50',visible: false};
                        }else if(params.name==='50周岁以上'){
                            agePara = {name: 'age', type: 'string', value: '-1', visible: false};
                        }
                        self.query.push(agePara);
                    }
                });*/
            },
            getQueryTable(val){
              if (val === '基本人员信息表') {
                this.classId = 'aa1ed29d-45b5-4b5f-85cf-fd6a7a5e5932';
              } else if (val === '报酬信息表') {
                this.classId = '49ea668d-dceb-4a31-9307-005b79853bd1';
              }
              this.queryFields.forEach(item => {
                if (item.queryTableType === '基本人员信息表') {
                  item.tableName = 'VillageCadres';
                } else if (item.queryTableType === '报酬信息表') {
                  item.tableName = 'RewardInfo';
                }
                // delete item.queryTableType;
              })
              console.log(this.queryFields);
                
              this.loadFields()
            },
            handleChildClick(data){
              this.showBaseInfoDiaVis = true;
              this.detailInfo = data
            },
          handleImage(imageUrl){
                let arr = [];
                if(imageUrl){
                    if(imageUrl.indexOf(',')>-1){
                        imageUrl.split(',').forEach(item => {
                            arr.push(item.split('&')[0]);
                        })
                    }else{
                        arr.push(imageUrl.split('&')[0]);
                    }
                }
                return arr;
          },
          //工作简历时间线
            handleWorkExperience(workExperience) {
                if (!workExperience) {
                    return ["暂无工作简历信息！"];
                }
                return workExperience.split(/[\n]/);
            },
        },
        components:{
            CommonCRUD,
            swiper,
            swiperSlide,
            CountTo,
            SecretaryExport
        },
        created() {
            this.columns = this.$store.state.classInfo.properties;
        },
        mounted() {
            this.initAge();
            this.handelDqFd();
           // this.initEducation();
            this.initPersonType();
            this.initWorkDuration();
          //  this.initRank();
            this.initReward();
            this.initPartyStanding();
          //  this.initHonours();
            this.loadFields();
            this.loadAllstatistic();
        }
    }


</script>

<style>
    .secretaryStatistics .el-card {
        position: relative;
    }
    .secretaryStatistics .el-card__body {
        padding: 0px!important;
    }
    .secretaryStatistics .swiper-pagination {
        top: 90px!important;
        line-height: 35px;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
        float: left!important;
        margin-top: -80px;
    }
    .secretaryStatistics .slider-content {
        height: 780px;
      /*  border: 1px solid #EBEEF5;*/
        background-color: transparent;
        color: #303133;
        -webkit-transition: .3s;
        transition: .3s;
    }

    .secretaryStatistics .slider-result-content {
        margin-top: 50px;
        height: 970px;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        color: #303133;
        -webkit-transition: .3s;
        transition: .3s;
    }
    .secretaryStatistics .swiper-pagination-bullet-active:after span {
        color: #007aff;
    }
    .secretaryStatistics .specialInput .el-input--mini .el-input__inner{
        width: 100px !important;
    }
    .secretaryStatistics .specialInput .el-input--mini{
        width: 100px !important;
    }
    .secretaryStatistics .swiper-pagination-bullet {
        opacity: 1 !important;
    }
</style>

<style scoped>
    .tableCol{
        width:400px;
        display: inline-block;
        vertical-align: top;
        margin-top: -3px;
        margin-left: -2px;
        position: relative;
        top: -80px;
        left: -70px;
    }
    .tableCol td{
        height: 60px;
        font-size: 16px;
    }
    .tableColContent{
        background-color: #f3f3f3;
        width: 150px;
        font-family:' 黑体';
        font-weight:bold;
        line-height:35px;
        font-size: 14px!important;
        height: 35px!important;
        text-align: center;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
        padding-left: 5px;
        padding-right: 5px;
    }

    .tableCol::-webkit-scrollbar {
        width: 0;
    }
    .tableContent{
        width: 100%;
        display: inline-block;
        text-align: center;
        margin-top: -3px;
    }

    .tableContent button{
        height: 100px;
        width: 100px;
        padding:3px 3px;
        border-radius:4px;
        background-color: #F4F4F4;
        font-size: 14px;
    }
    .tableContent > tr > td > div{
        height: 25px;
        width: 100px;
    }
    .tableContent .sta-content *{
        width: 150px;
        font-size: 14px;
        color: white;
        height: 35px;
        line-height: 35px;
        letter-spacing: 2px;
        transition: all .3s;
    }
    .tableContent .sta-content :hover{
        cursor: pointer;
        transform: scale(1.1);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px transparent;
    }
    .tableline{
        position:relative;
        width:150px;
        height:75px;
        box-sizing:border-box;
        border:1px solid rgba(227,213,213,0.55);
        background: rgb(211, 80, 67);
        color: white;
    }

    .result-table {
        width: calc(100% - 100px);
        overflow-x: scroll;
        position: relative;
    }

    .tableline::before{
        content:"";
        position:absolute;
        left: 17px;
        top: 4px;
        width:112px;
        height:33px;
        box-sizing:border-box;
        border-bottom:1px solid rgba(227,213,213,0.55);
        transform-origin:bottom center;
        transform:rotateZ(26deg) scale(1.5);
    }

    .quert-result {
        width: 300px;
        height: 400px;
    }
    .secretaryStatistics {
        width: 100%;
        height: 970px;
        overflow: hidden;
    }
    .secretaryStatistics .title {
        margin: 55px 0 0 0  !important;
        display: block;
        /*background: linear-gradient(to right, #F1F7FE, #ffffff);*/
        font-size: 20px;
        line-height: 20px;
        text-align: left;
        background: linear-gradient(60deg, #66aabb, #43a047)!important;
        box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28)!important;
        color: #fff;
    }
    .secretaryStatistics .title span {
        position: relative;
        top: -10px;
        padding-left: 10px;
        font-weight: bold;
    }
    .secretaryStatistics .title:before {
        width: 6px;
        height: 40px;
        content: ' ';
        display: inline-block;
        /*background: #0d9FF8;*/
    }

    .secretaryStatistics .unit_label{
        font-size: 14px;
        font-weight: 400;
        line-height: 30px;
        color: #858585;
        vertical-align: bottom;
    }

    .secretaryStatistics .top_label {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: #858585;
        text-align: center;
    }
    .secretaryStatistics .listStyle{
        flex: 7;
        text-align: left;
        margin-left: 20px;
        margin-top: 30px;
    }
    .secretaryStatistics .top_value {
        font-size: 24px;
        font-weight: 400;
        line-height: 22px;
        color: #333;
        vertical-align: middle;
    }
    .secretaryStatistics .statisticsNumber{
        display: flex;
        height: 10%;
        margin-top: 80px;
        justify-content: space-between;
        /* padding: 0 20px; */
        margin-left: 10px;
    }
    .statisticsNumber .el-card {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 25px;
    }
    .secretaryStatistics .statisticsNumberCard{
        flex: 2;
        text-align: center;
        line-height: 40px;
        margin: 0 10px;
        cursor: pointer;
        background:#F1FFF3;
        border:1px solid rgba(10, 155, 26, 1);
        border-radius:4px;
    }
    .secretaryStatistics .statisticsNumberCard:hover {
        transform: scale(1.05);
    }
    .secretaryStatistics  .age-statisticsNumberCard:nth-child(-n+2) {
        margin: 0;
        cursor: default;
        transform: none;
        background-color: #FFFFFF;
        color: #0A9B1A;
    }
    .secretaryStatistics  .age-statisticsNumberCard:nth-child(1) {
        border-radius: 4px 0 0 4px;
        border-right: 1px dashed #0A9B1A;
    }
    .secretaryStatistics  .age-statisticsNumberCard:nth-child(2) {
        margin-right: 10px;
        border-radius: 0 4px 4px 0;
        border-left: none;
    }
    .secretaryStatistics .swiperHeaderBg{
        width: 100%;
        background: linear-gradient(to right,#64a9b3,#45a04e);
        height: 40px;
        border-radius: 3px 3px 0 0;
        margin: -80px 0px;
    }
</style>

<style>
    .secretaryStatistics .self-define {
        position: absolute;
        right: -19px;
        top: -6px;
        width: 56px;
        height: 24px;
        background: #13ce66;
        text-align: center;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
        box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
        display: none;
    }
    .secretaryStatistics .self-define i {
        color: white;
        transform: rotate(-45deg);
        font-weight: 700;
        top: -4px;
        left: 3px;
        position: relative;
    }
    .card-item-active .self-define {
        display: block;
    }
    .secretaryStatistics  .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: transparent;
        color: #FFFFFF;
        -webkit-appearance: none;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: none;
        -webkit-transition: .1s;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        font-size: 14px;
        border-radius: 3px 3px 0 0;
        width: 130px;
        height: 40px;
        line-height: 40px;
        margin:3px;
        padding: 0 15px;
        border: none;
    }

    .secretaryStatistics  .swiper-pagination-bullet-active {
        color: #64A9B2!important;
        background: #fff!important;
    }
     .secretaryStatistics .primary {
       display: inline-block;
      /* line-height: 1;
       white-space: nowrap;*/
       cursor: pointer;
      /* background: transparent!important;
       color: #FFFFFF!important;
       -webkit-appearance: none;
       text-align: center;
       box-sizing: border-box;
       -moz-user-select: none;
       -webkit-user-select: none;
       -ms-user-select: none;
      !* padding: 10px 10px;*!
       font-size: 14px;
       border-radius: 3px;
       margin-top: -5px;*/
   }
    .translate-enter{
        opacity: 0;
        transform: translateY(100px) translateX(10px) scale3d(2,2,6);
    }
    .translate-leave-to{
        opacity: 0;
    }
    .translate-enter-active{
        transition: all 0.8s ease;
    }
    .translate-leave-active{
        transition: all 0s ease;
    }

    .translate-hide-enter, .translate-hide-leave-active {
        transform: scale(0);
        opacity: 0;
    }




    .right-detail .el-button.is-circle {
        padding: 2px;
    }
    .detail-row .el-input--mini .el-input__inner {
        width: 185px !important;
    }
    @media screen and (max-width: 1430px) {
        .right-detail {
            font-size: 14px;
        }
    }
    .el-timeline .el-loading-mask {
        height: 300px;
    }

    /*.activity-management .el-textarea__inner {*/
    /*width: auto !important;*/
    /*}*/
</style>
<style scoped>
    .CsjDetail {
        padding: 10px 5px;
        min-height: 750px;
    }
    .CsjDetail .selectTownDiv{
        background: linear-gradient(to right,#64a9b3,#45a04e) ;
        height: 38px;
        line-height: 38px;
        font-size: 14px;
        margin-left: 5px;
        padding-left: 3px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    .CsjDetail .town-btn-active {
        float: left;
        height: 35px;
        line-height: 35px;
        margin: 3px 20px 0 0;
        padding: 0 20px;
        background: #FFFFFF;
        color: #5AA693;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    .CsjDetail .town-btn {
        float: left;
        height: 38px;
        line-height: 38px;
        margin: 0 20px 0 0;
        padding: 0 15px;
        color: #FFFFFF;
        background: none!important;
    }
    .CsjDetail .town-btn-active:hover{
        cursor: pointer;
    }
    .CsjDetail .town-btn:hover{
        cursor: pointer;
    }
    .CsjDetail  .swiperFather {
        width: 100%;
        height: 265px;
        position: relative;
    }
    .gallery-thumbs {
        height: 250px;
        box-sizing: border-box;
    }
    .CsjDetail .swiperTitle{
        margin-top: 30px;
        width: 90%;
    }
    .CsjDetail .el-form-item__label {
        color: #7b8384;
    }
    .baseMassage {
        background-image: url("../../static/messageBg/cardBg.png");
        background-size: 100% 100%;
    }
    .workMessage {
        background-image: url("../../static/messageBg/workMessageBg.png");
        background-size: 100% 100%;
    }
    .workExperience {
        height: 350px;
        background-image: url("../../static/messageBg/workExperienceBg.png");
        background-size: 100% 100%;
    }
    .repaid {
        height: 350px;
        background-image: url("../../static/messageBg/repaidBg.png");
        background-size: 100% 100%;
    }
    .family {
        height: 300px;
        background-image: url("../../static/messageBg/familyBg.png");
        background-size: 100% 100%;
    }
    .inCountry {
        height: 300px;
        background-image: url("../../static/messageBg/inCountryBg.png");
        background-size: 100% 100%;
    }
    .train {
        height: 300px;
        background-image: url("../../static/messageBg/trainBg.png");
        background-size: 100% 100%;
    }
    .honer {
        height: 300px;
        background-image: url("../../static/messageBg/honerBg.png");
        background-size: 100% 100%;
    }
    .assessment {
        height: 300px;
        background-image: url("../../static/messageBg/assessmentBg.png");
        background-size: 100% 100%;
    }

    .gallery-top {
         height: 80%;
         width: 100%;
     }

    .gallery-thumbs .swiper-slide {
        width: 170px;
        height: 245px;
        opacity: 0.4;
     }
    .gallery-thumbs .swiper-slide .head-list-item {
        width: 144px;
        height: 215px;
        margin: 35px 0 0 0;
        position: relative;
        transition: all .4s;
    }
    .gallery-thumbs .swiper-slide-active {
         opacity: 1;
     }
    .gallery-thumbs .swiper-slide-active .head-list-item {
        opacity: 1;
        box-shadow: 0 2px 12px 0 #BCE1C7;
        transform: translateY(-20px) scale(1.15);
    }
    .CsjDetail .cardTitleStyle{
        position: relative;
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        margin:0px 10px 10px 10px ;
        color:#55BD94;
    }
    .name-post {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        background-color:rgba(85, 189, 148, 0.8);
        position: relative;
        top: -40px;
        /*height: 35px;*/
        overflow: hidden;
        padding: 2px 0;
        border-radius: 0 0 5px 5px;
        opacity:1
    }
    .name-post1 {
        /*width: 100%;*/
        text-align: center;
        margin-bottom: 20px;
        position: relative;
        overflow: hidden;
        width: 160px;
        height: 45px;
        display: inline-block;
        top: 0px;
        color:#55BD94;
        font-size: 14px;
    }
    .CsjDetail .smallTitle{
        vertical-align: middle;
        width: 26px;
        height: 26px;
        float: left;
        margin-right: 3px;
    }
    .CsjDetail .Secoll{
        height: 180px;
        overflow: hidden;
        padding: 0px!important;
    }
    .CsjDetail  .Secoll_workExperience {
      height: 230px;
    }
    .CsjDetail .more{
        width:100px;
        height:14px;
        font-size:14px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:#55BD94;
        line-height:30px;
        cursor: pointer;
    }
    .lableColor{
        font-size:16px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:#55BD94;
        line-height:30px;
    }
   .valueStyle {
        font-size:16px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(57,57,57,1);
        line-height:30px;
    }
    .CsjDetail .el-card{
        border: 1px solid rgba(69, 161, 79, 0.3)!important;
    }
    .CsjDetail .support-area {
        position: relative;
        top: -4px;
    }
    .CsjDetail .baseInfoDiv{
        font-size: 14px;
        display: flex;
        height: 40px;
    }
    .baseInfoDiv span span {
        vertical-align: top;
    }
    .CsjDetail .baseLabel{
        flex:0 0 100px;
        text-align: right;
        vertical-align: top;
        color: #AAAAAA;
        padding-right:15px ;
        line-height: 40px;
    }
    .CsjDetail .baseVal{
        flex: 1;
        text-align: left;
        vertical-align: top;
        color: #393939;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow:hidden;
        line-height: 40px;
    }
    .baseInfoCard{
        font-size: 14px;
        line-height: 36px;
        padding: 0!important;
        text-align: left;
        color: #393939;
    }
   .baseCardLabel{
        width: 100px;
        display: inline-block;
        text-align: right;
        vertical-align: top;
        color: #AAAAAA;
    }
    .baseCardVal{
        width: 80px;
        display: inline-block;
        text-align: left;
        vertical-align: top;
        margin-left: 6px;
    }
    .baseCardLongVal{
        width: 285px;
        display: inline-block;
        text-align: left;
        vertical-align: top;
        margin-left: 6px;
    }
    .popoverLine{
        border:1px dotted rgba(145, 145, 145, 0.38);
    }
    .popoverScroll{
        overflow-x: scroll;
        max-height: 700px;
    }
    .popoverImage{
        width: 350px;
        margin-left: 30px;
    }
    .CsjDetail el-col{
        padding: 0px!important;
    }
    .CsjDetail .activeLine{
        width: 100%;
        height: 1px;
        background-color: transparent;
        position: relative;
        box-shadow:0px 3px 14px 0px rgba(69,161,79,0.3);
    }
    .CsjDetail .activeLineArrow{
        margin: 0px auto 0 auto;
        width: 20px;
        height:20px;
        background: white;
        border-top:1px solid #55BD94;
        border-left:1px solid #55BD94;
        transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        position: relative;
        left: -9px;
        top: -10px;
    }
    .CsjDetail .singleContentDiv{
        background: #FFFFFF;
        box-shadow:0px 3px 14px 0px rgba(69,161,79,0.3);
        padding: 0px 20px 0;
        border: 1px rgba(69, 161, 79, 0.3) solid;
        border-top: 1px #55BD94 solid;
        border-radius: 3px;
        border-bottom: none;
        margin-top: 20px;
    }
    .CsjDetail .fileIcon{
        font-size: 16px;
    }
    .CsjDetail .taskNotice{
        width: 24px;
        height: 24px;
        display: inline-block;
        background: url("../../static/img/csj/notice.png");
        vertical-align: middle;
    }
    .CsjDetail .swiper-button-prev, .swiper-container-rtl .swiper-button-prev{
        background-image:url("../../static/img/csj/swiperLeftArrow.png")!important;
    }
    .CsjDetail .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
       background-image:url("../../static/img/csj/swiperRightArrow.png")!important;
    }
   /* .CsjDetail .swiper-container{
        overflow: visible !important;
    }*/
    .CsjDetail_scarch {
      margin: 0px 0 20px 5px!important;
      height: 30px;
      line-height: 30px;
    }
    .CsjDetail_scarch span {
      color: #58be96;
      font-weight: bold;
      vertical-align: bottom;
    }
    .CsjDetail_scarch .el-select.el-select--mini {
      margin-left: -10px;
    }
    .CsjDetail_scarch .el-input--mini .el-input__inner {
      height: 30px;
    }
    .CsjDetail_scarch .el-button.el-button--primary.el-button--mini {
      vertical-align: bottom;
      background-color: #58be96;
      border-color: #58be96;
    }
    .baseInfoDiv.insurance_line {
      float: left;
      width: 50%;
    }
    .CsjDetail .insurance_box {
      overflow: hidden;
      margin-top: 35px;
      border-bottom: 1px dashed #ccc;
    }
    .CsjDetail .insurance_box .card_line {
      margin: 8px 0;
      border-top: 1px dashed #ccc;
    }
</style>
<style>
